<template>
    <lay-layer titleStyle="background:#249baa;color:#fff;font-size: 16px;font-weight: 600;" :title="props.title"
        :beforeClose="onClose">
        <div class="container" :area="[props.width + 'px', props.height + 'px']">
            <slot name="content"></slot>
        </div>
        <template #footer>
            <div class="Layer-footer">
                <lay-button type="danger" @click="onClose">取消</lay-button>
                <lay-button type="primary" @click="onConfirm">确定</lay-button>
            </div>
        </template>
    </lay-layer>
</template>

<script setup lang="ts">
//定义弹窗属性的数据类型
interface DialogProps {//接口通常用来定义数据类型
    title: string,//标题
    width?: number,//?意思是改字段不是必须的
    height?: number
}
//接收父组件传递过来的值
const props = withDefaults(defineProps<DialogProps>(), {
    title: '标题',
    width: 630,
    height: 280
})
const emit = defineEmits(['onClose', 'onConfirm'])
//弹窗关闭
const onClose = () => {
    emit('onClose')
}
//弹窗确定
const onConfirm = () => {
    emit('onConfirm')
}
</script>

<style scoped lang="scss">
.container {
    overflow-x: initial;
    overflow-y: auto;
    padding-left: 10px;
    padding-top: 10px;
}

.Layer-footer {
    border-top: 1px solid #e8eaec !important;
    display: flex;
    justify-content: right;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
</style>